<template>
    <video src="../assets/video.mp4" autoplay loop muted class="videoPlayer"></video>
    <div class="loginContainer">
        <div class="cover">
            <img src="../assets/海豚小女孩.png" alt="" class="footImg">
            <img src="../assets/飞起来的女生.png" alt="" class="girl">
            <img src="../assets/地球.png" alt="" class="earth">
        </div>
        <div class="login">
            <h1>登录</h1>
            <el-divider />
            <div class="loginItem">
                <span>邮箱</span>
                <el-input v-model="loginName" placeholder="请输入邮箱" />
            </div>
            <div class="loginItem">
                <span>密码</span>
                <el-input v-model="loginPassword" type="password" placeholder="请输入密码" show-password />
            </div>
            <el-button type="primary" round @click="login">登录</el-button>
            <div class="toRegister">没有账号? <span @click="toRegister">立即注册</span></div>
        </div>
        <div class="register">
            <h1>注册</h1>
            <el-divider />
            <!-- <div class="loginItem">
                <span>公司名称</span>
                <el-input v-model="registerName" placeholder="请输入公司名称" />
            </div> -->
            <div class="loginItem" style="position: relative;">
                <span>邮箱</span>
                <el-input v-model="registerEmail" placeholder="请输入邮箱"/>
                <div class="send" @click="sendMessage">发送验证码</div>
            </div>
            <div class="loginItem">
                <span>密码</span>
                <el-input v-model="registerPassword" type="password" placeholder="请输入密码，长度大于8位且同时包含字母和数字" show-password />
            </div>
            <div class="loginItem">
                <span>确认密码</span>
                <el-input v-model="confirm" type="password" placeholder="请再次输入密码" show-password />
            </div>
            <div class="loginItem">
                <span>验证码</span>
                <el-input v-model="verification" placeholder="请输入验证码" />
            </div>
            <div class="loginItem">
                <span>用户类型</span>
                <el-radio-group v-model="userType" style="width: 350px; color:aliceblue;">
                    <el-radio value="1" >企业用户</el-radio>
                    <el-radio value="2" >环保局用户</el-radio>
                  </el-radio-group>
            </div>
                <el-button type="primary" round @click="register">注册</el-button>

            <div class="toRegister">已有账号? <span @click="toLogin">立即登录</span></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeUnmount, onMounted, reactive } from 'vue'
import http from '../http/http'
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";
const router = useRouter();
onMounted(() => {
    let body = document.getElementsByTagName('body')[0];
    body.style.overflow = 'hidden'
})

onBeforeUnmount(() => {
    // 取消body的样式
    let body = document.getElementsByTagName('body')[0];
    body.style.overflow = 'auto'
})
let loginName = ref('')
let loginPassword = ref('')
let toRegister = () => {
    // 遮罩加平移动画
    let cover = <HTMLElement>document.getElementsByClassName('cover')[0];
    cover.style.transform = 'translateX(100%)';
    cover.style.transition = 'all 1s ease-in-out'
    cover.style.borderRadius = '0 20px 20px 0'
}
let registerName = ref('')
let registerEmail = ref('')
let registerPassword = ref('')
let confirm = ref('')
let verification = ref('')
let userType= ref()
let toLogin = () => {
    // 遮罩加平移动画
    let cover = <HTMLElement>document.getElementsByClassName('cover')[0];
    cover.style.transform = 'translateX(0)';
    cover.style.transition = 'all 1s ease-in-out'
    cover.style.borderRadius = '20px 0 0 20px'
}
let sendMessage = ()=>{
    http.post('/api/user/sendmail',null,{
        params:{
            'email': registerEmail.value
        }
    }).then((res)=>{
        ElMessage.success('验证码发送成功')

    })
}
let check = ()=>{
    let pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    let pattern1 = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
    if(!pattern.test(registerEmail.value) ) {ElMessage.error('请输入正确的邮箱地址'); return false;}
    if(!pattern1.test(registerPassword.value) ) {ElMessage.error('密码格式不正确'); return false;}
    if(registerPassword.value!=confirm.value) {ElMessage.error('两次输入的密码不一致'); return false;}
}
let register = ()=>{
    check()
    http.post('/api/user/register',null,{
        params:{
        'name': registerName.value,
        'email': registerEmail.value,
        'password': registerPassword.value,
        'verCode': verification.value,
        'role': userType.value - 0
    }
    }).then((res)=>{
        ElMessage.success('注册成功')
        toLogin()
    })
}
let login = ()=>{
    localStorage.removeItem('Authorization1')
    http.post('/api/user/login',null,{
        params:{
        'email': loginName.value,
        'password': loginPassword.value,
    }
    }).then((res)=>{
        if( res.data.code < 300){
            ElMessage.success('登录成功')
            // console.log(Object.keys(res.data))
            localStorage.setItem('Authorization1',res.data.token)
            localStorage.setItem('user',JSON.stringify(res.data.records))
            router.push({ path: "/home" })
        }
    })
}
</script>

<style lang="less" scoped>
.videoPlayer {
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    object-fit: fill;
    position: absolute;
}

.loginContainer {
    display: relative;
    width: 950px;
    height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    /* 毛玻璃 */
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 0 40px #4169E1;

    .cover {
        position: absolute;
        width: 50%;
        height: 100%;
        background-color: #4169E1;
        border-radius: 20px 0 0 20px;
        z-index: 999;

        .footImg {
            position: absolute;
            width: 100%;
            bottom: 0;
        }

        .girl {
            position: absolute;
            width: 50%;
            left: 0;
            top: 0;
        }

        .earth {
            position: absolute;
            width: 50%;
            right: 0;
            top: 5%;
        }
    }

    .login {
        position: absolute;
        width: 50%;
        height: 100%;
        right: 0;
        color: aliceblue;

        h1 {
            width: fit-content;
            margin: 30px auto 0;
        }

        .el-divider {
            width: 90%;
            margin-left: 50%;
            transform: translate(-50%, 0);
        }

        .loginItem {
            width: 90%;
            margin: 30px auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .el-button {
            margin: 20px 50%;
            transform: translate(-50%, 0);
            width: 100px;
            height: 40px;
            font-size: 20px;
            background-color: #4169E1;
            border-color: #4169E1;
            color: aliceblue;
        }

        .toRegister {
            width: fit-content;
            margin: 0 auto;

            span {
                cursor: pointer;
            }
        }
    }

    .register {
        position: absolute;
        width: 50%;
        height: 100%;
        left: 0;
        color: aliceblue;

        h1 {
            width: fit-content;
            margin: 30px auto 0;
        }

        .el-divider {
            width: 90%;
            margin-left: 50%;
            transform: translate(-50%, 0);
        }

        .loginItem {
            width: 90%;
            margin: 30px auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .send{
            position: absolute;
            right: 10px;
            cursor: pointer;
        }
        .el-button {
            margin: 20px 50%;
            transform: translate(-50%, 0);
            width: 100px;
            height: 40px;
            font-size: 18px;
            background-color: #4169E1;
            border-color: #4169E1;
            color: aliceblue;
        }
        .buttons{
            width: 100%;
            display: flex;
        }
        .toRegister {
            width: fit-content;
            margin: 0 auto;

            span {
                cursor: pointer;
            }
        }
    }
}

.el-input {
    width: 350px;
    height: 50px;
    background-color: transparent;
}

::v-deep .el-input__wrapper {
    background-color: transparent !important;
}

::v-deep .el-input__inner {
    background-color: transparent !important;
    color: black;
}

::v-deep .el-input__inner::placeholder {
    color: #f0e9e9;
}
::v-deep .el-radio__label{
    color: aliceblue;
}
</style>                                                                                                                                                                                                                                                                                                                                                               